<template>
	<view class="login-page">
	
		<view class="login-logo">
			<p class="logo"><image src="../../static/login/login-word.png"/></p>
		</view>

		<!-- 登录表单 -->
		<view class="login-box">
			<form id='login-form' class="login-form">
				<view class="form-item">
					<i></i>
					<view class="form-input">
						<input v-model='form.username' type="text" placeholder="请输入用户名">
					</view>
				</view>
				<view class="form-item">
					<i></i>
					<view class="form-input">
					    <input v-model='form.password' placeholder="请输入密码" :password="showPassword" />
					    <view class="pwd-img" @click="changePassword">
							<image :src="!showPassword ? pwdShow : pwdHidden" />
						</view>
					</view>
				</view>
				<view class="form-item" v-if="enabledValidCode">
					<i></i>
					<view class="form-input">
					    <input v-model='form.captcha' placeholder="请输入验证码" />
					    <view class="code-img" @click="refreshCode">
							<image :src="code.src" />
						</view>
					</view>
				</view>
			</form>
			
			<view>
				<view>
					<button class="login-btn" type="primary" @click="handleLogin">{{logining ? '登录中...' : '登录'}}</button>
				</view>
			</view>
			<view class="error" v-if="errorMessage && errorMessage.length">
				<view>
					<span style="color: #f44;">{{errorMessage}}</span>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import pwdHidden from '../../static/login/pwd-hidden.png'
	import pwdShow from '../../static/login/pwd-show.png'
	import config from '@/utils/config.js'
	import store from '@/store'
	import { getCaptcha, login, authorize, accessToken } from '@/api/oauth.js'
	import { getUserInfoByName } from '@/api/common.js'
	
	const loginForm =  {
	    username: store.getters['user/account'],
	    password: store.getters['user/password']
	} 
	
	export default {
	    data () {
	        return {
				pwdHidden,
				pwdShow,
				form: {
					username: loginForm.username,
					password: loginForm.password,
					requestId: '',
					captcha: '',
				},
				showPassword: true,
	            errorMessage: '',
	            logining: false,
				enabledValidCode: false,
				code: {
					src: '',
					value: '',
					len: 5,
					type: 'src'
				},
	        }
	    },
		onLoad() {
			this.init(true)
		},
	    methods: {
			init(isBackfill) {
				const params = {
					requestId: this.form.requestId
				}
				getCaptcha(params).then(res=>{
					if (res.state === 501) {
						this.enabledValidCode = false
					} else {
						this.enabledValidCode = true
						this.code.src = res.data
						this.form.requestId = res.variables.requestId
					}
					if (isBackfill) {
						this.form.code = this.code.value
					}
				})
			},
			refreshCode() {
				this.init()
			},
			changePassword: function() {
			    this.showPassword = !this.showPassword;
			},
	        handleLogin: function () {
	            if (this.logining) { 
	                return
	            }
	            this.errorMessage = ''
	            if (!this.form.username || !this.form.username.length) {
	                this.errorMessage = '请输入用户名'
	                return
	            }
	            if (!this.form.password || !this.form.password.length) {
	                this.errorMessage = '请输入密码'
	                return
	            }
				if (this.enabledValidCode) {
					if (!this.form.captcha || !this.form.captcha.length) {
					    this.errorMessage = '请输入验证码'
					    return
					}
				}
	
	            //this.logining = true
				const params = {
					captcha: this.form.captcha,
					password: this.form.password,
					requestId: this.form.requestId,
					username: this.form.username
				}
	            login(params).then(res => {
					authorize(res.data).then(res => {
						accessToken(res.data).then(res => {
							let token = res.data.access_token
							if (token.length) {
								uni.setStorageSync("_app_token", token);
								// 获取用户信息
								getUserInfoByName(this.form.username).then(res => {
									if(res){
										this.$store.commit('user/save', {
											username: this.form.username,
											pwd: this.form.password,
											...res.data.user,
											token: token
										})
									}
								})
								.then(() => {
									this.logining = false
									uni.switchTab({
										url: '../index/index'
									})
								})
							}
						})
					})
				})
	        }
	    }
	}
</script>

<style>
	.login-page {
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	}
	
	.login-logo {
		width: 100%; 
		float: left; 
		background: url(../../static/login/login-bg.jpg) center top no-repeat; 
		background-size: 100%; 
		padding: 5vh 0;
	}
	
	.logo {
	    width: 100%; 
		margin: 15% auto 30% auto;
	}
		
	.logo image {
	    width: 400rpx;
	    height: 240rpx;
	    margin: 0 calc(50% - 200rpx);
	}
	
	.login-box { 
		width: 80%; 
		float: left; 
		margin: 0 10%;
	}
	
	.login-form {
		display: block; 
		padding: 0 30px;
	}
	
	.form-item {
		display: block;
		float: left; 
		width: 100%;
		//margin-bottom: 10px;
	}
	
	.form-item i {
		display: block; 
		float: left; 
		width: 30px;
		height: 60px;
	}
	
	.form-item:nth-of-type(1) i { 
		background: url(../../static/login/login-user.png) center no-repeat;
		background-size: 100%;
	}
	
	.form-item:nth-of-type(2) i { 
		background: url(../../static/login/login-pwd.png) center no-repeat; 
		background-size: 100%;
	}
	
	.form-item:nth-of-type(3) i {
		background: url(../../static/login/login-code.png) center no-repeat; 
		background-size: 100%;
	}
	
	.form-item input { 
		width: 100%;
		font-size: 14px;
		padding: 8px 0;
	}
	
	.form-input {
		display: flex; 
		border-bottom: 1px solid #ddd;
		margin: 10px 0 0 40px;
	}
	
	.login-btn { 
		background: #46a3ff; 
		color: #fff; 
		border: none; 
		border-radius: 50px; 
		width: 100%;
		height: 50px; 
		padding: 0; 
		margin-top: 20px; 
		float: left;
		box-shadow:0px 5px 10px rgba(0, 0, 0, 0.35);
	}
	
	.error {
	    margin: 200px 0 0 20px;
	}
	
	.pwd-img {
	    padding-top: 8px;
	}
	
	.pwd-img image{
	    width: 24px;
	    height: 20px;
	}
	
	.code-img image{
	    width: 90px;
	    height: 30px;
	}
	
</style>
